<template>
    <div class="RealTime_Top">
        <p style="font-size: 14px; font-weight: 700; color: rgba(162, 182, 255, 1);">
            实时用电
        </p>
    </div>
    <div class="DuTon">
        <div class="degrees">
            <div class="degrees_icon">
                <img src="../../assets/iconDu.png" alt="">
            </div>
            <div class="degrees_number">
                <p style="font-size: 16px; font-weight: 400;">
                    72670
                </p>
                <p style="font-size: 9px; color: rgba(194, 214, 255, 1);">
                    总用电量 (kw)
                </p>
            </div>
        </div>
        <div class="ton">
            <div class="ton_icon">
                <img src="../../assets/iconDu.png" alt="">
            </div>
            <div class="ton_number">
                <p style="font-size: 16px; font-weight: 400;">
                    72670
                </p>
                <p style="font-size: 9px; color: rgba(194, 214, 255, 1);">
                    总用电量 (kw)
                </p>
            </div>
        </div>
    </div>
    <div ref="chart" class="RealTime_Bottom">

    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onBeforeUnmount } from 'vue';

const chart = ref(null);
let myChart = null;

const RealTime = () => {
    myChart = echarts.init(chart.value);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
    const option = {
        xAxis: {
            type: 'category',
            data: [
                '0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00',
                '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'
            ],
            axisLine: {
                lineStyle: {
                    color: '#2B3E7B',
                },
            },
            axisLabel: {
                color: '#AED2FF',
            },
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#2B3E7B'
                }
            },
            axisLabel: {
                color: '#AED2FF',
            },
        },
        series: [
            {
                data: [650, 500, 850, 700, 1000, 600, 900, 750,500,1200,1100,600,500,400],
                type: 'line',
                smooth: true,
                lineStyle: {
                    color: '#FF006A',
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(255, 51, 102, 0.7)' },
                        { offset: 1, color: 'rgba(128, 0, 128, 0.1)' }
                    ])
                },
                showSymbol: false
            }
        ],
        grid: {
            left: '1%',
            right: '3%',
            top: "10%",
            bottom: '3%',
            containLabel: true,
        },
    };

    myChart.setOption(option);
}

onMounted(() => {
    RealTime();
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();  // 销毁图表实例，清理资源
    }
})

</script>

<style lang="scss" scoped>
.RealTime_Top {
    position: fixed;
    left: 70px;
    top: 240px;
    width: 330px;
    height: 30px;
    opacity: 1;
    background-image: url('../../assets/Path2.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    line-height: 30px;

    p {
        margin-left: 14px;
    }
}

.DuTon {
    width: 330px;
    height: 50px;
    position: fixed;
    left: 70px;
    top: 280px;
    /* background: rgba(12, 29, 95, 1); */
    display: flex;

    .degrees {
        width: 155px;
        height: 50px;
        background: rgba(12, 29, 95, 1);
        background: url("../../assets/PhotoDu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: absolute;
        top: 0%;
        left: 0%;
        display: flex;


        .degrees_icon {
            position: absolute;
            top: 15px;
            left: 15px;
        }

        .degrees_number {
            position: absolute;
            top: 10px;
            left: 85px;
        }
    }

    .ton {
        width: 155px;
        height: 50px;
        background: rgba(12, 29, 95, 1);
        position: absolute;
        top: 0%;
        right: 0%;
        background: url("../../assets/PhotoDu.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100% 100%;

        .ton_icon {
            position: absolute;
            top: 15px;
            left: 15px;
        }

        .ton_number {
            position: absolute;
            top: 10px;
            left: 85px;
        }
    }
}

.RealTime_Bottom {
    width: 330px;
    height: 150px;
    position: fixed;
    left: 70px;
    top: 340px;
    background: rgba(12, 29, 95, 1);
}
</style>